<template>
  <div>
    <div class="top">
      <!-- 顶部搜索和城市列表 -->
      <div class="toptop">
        <!-- 城市列表 -->
        <div class="left" @click="citylist">{{city}}<van-icon name="arrow-down" /></div>
        <!-- 搜索框 -->
        <div class="right">
          <div><van-icon name="search" /></div>
          请输入小区或地址
        </div>
      </div>
      <!-- 地图选点 -->
      <div class="map"><van-icon name="location-o" @click="$router.push('/map-map')"/></div>
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 212px"
      >
        <van-swipe-item
          ><img src="@/assets/lunbo1.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo2.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo3.png" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="middle">
      <van-grid class="icon">
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="location-o" text="地图找房" />
        <van-grid-item icon="cash-back-record" text="去出租" @click="$router.push('/release-house')"/>
      </van-grid>
    </div>
    <div class="bottom">
      <div class="top">
        <div class="left">租房小组</div>
        <div class="right">更多</div>
      </div>
      <div class="bottom">
        <div class="top">
          <div class="one">
            <img src="@/assets/join.png" alt="" />
            <p>家住回龙观<br />归属的感觉</p>
          </div>
          <div class="two">
            <img src="@/assets/join.png" alt="" />
            <p>宜居四五环<br />大都市生活</p>
          </div>
        </div>
        <div class="bottom">
          <div class="three">
            <img src="@/assets/join.png" alt="" />
            <p>喧嚣三里屯<br />繁华的背后</p>
          </div>
          <div class="four">
            <img src="@/assets/join.png" alt="" />
            <p>比邻十号线<br />地铁心连心</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { gToken, ggToken } from '@/utils/storage'
export default {
  data () {
    return {
      city: '上海'
    }
  },
  async created () {
    const res = await gToken()
    console.log(res)
    this.city = res
    const ress = await ggToken()
    console.log(ress)
  },
  methods: {
    citylist () {
      // console.log(1)
      router.push('/city-list')
    }
  }
}
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 18.6vh;
  // background-color: aqua;
  display: flex;
  flex-wrap: wrap;
  //  justify-content: space-around;
  .top{
    width: 100%;
    height: 1.68vh;
    background-color: #fff;
    justify-content: space-between;
  }
  .bottom {
    .top {
      display: flex;
      font-size: 14px;
      margin-top: 3vh;
      justify-content: space-around;
      margin-left: -5vh;
      .two{
        margin-top: 0.1vh;
      }
      div{
        display: flex;
        img{
          width: 5vh;
          height: 5vh;
        }
      }
    }
    .bottom {
      display: flex;
      font-size: 14px;
      margin-top: 10vh;
      justify-content: space-around;
      margin-left: -3.5vh;
       .four{
        margin-top: 0.1vh;
      }
      div{
        display: flex;
        img{
          width: 5vh;
          height: 5vh;
        }
      }
    }
  }
  .top {
    padding: 0 1.6vh;
    display: flex;
    justify-content: space-between;
    .left {
      font-weight: 700;
      font-size: 14px;
    }
    .right {
      font-size: 14px;
      color: #787d82;
    }
  }
}
.icon {
  color: rgb(4, 175, 104);
}
.map {
  position: fixed;
  right: 2.2vh;
  top: 4vh;
  font-size: 18px;
  z-index: 2;
  color: #fff;
}
.toptop {
  width: 44vh;
  height: 3.4vh;
  background-color: #fff;
  padding: 5px 5px 5px 8px;
  border-radius: 3px;
  display: flex;
  text-align: left;
  overflow: hidden;
  position: fixed;
  top: 3vh;
  left: 50%;
  transform: translateX(-25vh);
  z-index: 1;
  .left {
    width: 6vh;
    height: 3.4vh;
    /* background-color: firebrick; */
    font-size: 12px;
    padding-top: 0.8vh;
    margin-left: -0.3vh;
    margin-top: -0.2vh;
  }
  .right {
    /* background-color: salmon; */
    padding-top: 0.2vh;
    font-size: 12px;
    margin-left: 4vh;
    color: #9c9fa1;
    div {
      display: inline-block;
      font-size: 16px;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
img {
  width: 100%;
}
</style>
